<template>
  <el-container class="view-con">
    <el-aside class="view-bg" width="8%"></el-aside>
    <el-container>
      <el-header class="view-bg" height="10%">
        <p style="color: #fff;float:left;margin-top: 20px;">教评管理系统</p>
        <login-out></login-out>
      </el-header>
      <el-main class="view-main">
        <munueMain></munueMain>
        <hover-box></hover-box>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="describe">
          <el-breadcrumb-item class="bar-text" :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{buildNum}}楼栋信息</el-breadcrumb-item>
          <el-breadcrumb-item>{{floor}}楼信息</el-breadcrumb-item>
          <el-breadcrumb-item>{{roomName}}号房间</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="init-box">    <!--container(components) all in here!-->
          <h1>{{buildNum}}栋{{floor}}楼 {{roomName}}号</h1>
          <el-card class="queryCard" :body-style="{ padding: '20px 40px'  }">
            <el-table :data="buildInfoTable" max-height="400" style="background:#fff;" :row-style="nullRow">
              <el-table-column prop="bunkNo" label="床号" align="center" width="70"></el-table-column>
              <el-table-column prop="name" label="姓名" align="center" width="100"></el-table-column>
              <el-table-column prop="studentNumber" label="学号" align="center" width="130"></el-table-column>
              <el-table-column prop="sex" label="性别" width="70" align="center"></el-table-column>
              <el-table-column prop="school" label="学院" align="center" width="110"></el-table-column>
              <el-table-column prop="grade" label="年级" align="center" width="100"></el-table-column>
              <el-table-column prop="major" label="专业" align="center" width="160"></el-table-column>
            </el-table>
          </el-card>

        </div>
      </el-main>
      <el-footer height="8%" class="view-bg"></el-footer>
    </el-container>
    <el-aside width="8%" class="view-bg"></el-aside>
  </el-container>
</template>

<script>
  import MunueMain from "@/components/main/MunueMain"
  import HoverBox from "@/components/main/hoverBox";
  import LoginOut from "../components/main/LoginOut";
  import query from '@/api/query'
  import buildingInfo from '@/api/buildingInfo'

  export default {
    name: "apartment",
    components: {LoginOut, HoverBox, MunueMain},
    data() {
      return {
        // search_Info: '',
        buildInfoTable: [],
        buildNum: '',
        buildingId:'',
        bedNum:'',
        floor:'',
        roomId:'',
        roomName:'',
        floors:[],
        floorsData:[],
        bunks:[],
      }
    },
    methods: {
      getStudent(buildingId,floorNum){
        let that=this;
        query.getBuildingInfo(buildingId,floorNum).then(function (resp) {
          if (resp.data.code == 200) {
            let arr=[];
            for(let i=0;i<resp.data.data.length;i++){
                if(resp.data.data[i].roomNo == that.roomName) arr.push(resp.data.data[i]);
            }
            let arr1=[];
            for(let i=0;i<that.bedNum;i++){
                arr1[i]={'bunkNo':i+1};
                for (let j=0;j<arr.length;j++){
                    if(arr[j].bunkNo == i+1) arr1[i]=arr[j];
                    // else if (arr1[i]==null) arr1[i]={'bunkNo':i+1};
                }
            }
            // that.buildInfoTable = resp.data.data;
            that.bunks=resp.data.data;
            that.buildInfoTable=arr1;
          }
        }).catch(function (err) {
          console.log(err);
        })
      },
      loadInfo() {
        let that = this;
        if (that.globolContext.sendRoomId != '') {
          that.buildNum = that.globolContext.sendBuildNum;
          that.floor = that.globolContext.sendFloor;
          that.roomId = that.globolContext.sendRoomId;
          that.roomName = that.globolContext.sendRoomName;
          that.bedNum = that.globolContext.sendBedNum;
          console.log("buildingNum:" + that.buildNum);

          buildingInfo.NametoId(that.buildNum).then(function (resp) {
            if (resp.data.code == 200) {

              that.buildingId = resp.data.data;
              console.log("resp id:" + that.buildingId);
              if (that.buildingId) that.getStudent(that.buildingId,that.floor);
              // if (that.buildingId) {
              //   buildingInfo.getbuildingInfobyId(that.buildingId).then(function (resp) {
              //     if (resp.data.code == 200) {
              //       let arr = [];
              //       for (let i = 0; i < resp.data.data.numberOfFloor; i++) arr[i] = i + 1;
              //       that.floors = arr.map(item => {
              //         return {value: item, label: item + '楼'};
              //       });
              //     }
              //   })
              //     .catch(function (err) {
              //       console.log(err);
              //     })
              // }
            }
          })
            .catch(function (err) {
              console.log(err);
            });
        } else {
          that.$router.push({
            path: "/index"
          })
        }
      },
      nullRow({row, rowIndex}) {
        if(row == null){
          return '';
        }
        else if (row.name == undefined) {
            return {"background-color":"#f1f1f1"};
        }
      }
      // searchInfo() {
      //   let that = this;
      //   if (!that.search_Info) {
      //     this.$message({
      //       showClose: true,
      //       message: '错误！搜索内容不能为空，请输入您要搜索的内容',
      //       type: 'warning'
      //     })
      //   }
      // },
      // checkedFloor(index){
      //   let that=this;
      //   console.log(index+1);
      //   let j=0;
      //   that.getStudent(that.buildingId,index+1);
      //   // for(let i=0;i<that.bunks.length;i++){
      //   //     if(that.bunks[i].roomNo.slice(0,1)==(index+1)){
      //   //         that.floorsData[j]=that.bunks[i];
      //   //         j++;
      //   //     }
      //   // }
      //   that.buildInfoTable=that.floorsData;
      //   console.log(that.floorsData);
      // }
    },
    mounted() {
      this.loginControl();
      this.loadInfo();
    },
    computed: {
      // build_Info() {
      //   let search = this.search_Info;
      //   if (search) {
      //     return this.buildInfoTable.filter(function (table) {
      //       return Object.keys(table).some(function (key) {
      //         return String(table[key]).toLowerCase().indexOf(search) > -1
      //       })
      //     })
      //   }
      //   return this.buildInfoTable
      // },
    },
  }
</script>

<style scoped>
  .queryCard {
    width: 80%;
    height: 450px;
    margin: auto;
  }
  .el-div{
    margin-top: 80px;
    height: 450px;
    margin-left: 12px;
  }
  .floorList{
    margin-top: -10px;
  }
</style>
